<template>
  <div class="infoFlock">
    <mt-header>
      <mt-button icon="back" slot="back"></mt-button>
    </mt-header>
    <div class="flockContent">
      <mt-cell
        :title="item.name"
        :label="item.info"
        v-for="item in flocklist"
        :key="item.flockId"
      >
        
        <div class="img" slot="icon">
          <img :src="item.image" width="14" height="14" v-for="(item,index) in $store.state.users" :key="index"/>
        </div>
        <mt-button type="primary" size="small" @click="goDetails(item.flockId,item.name)"
          >点击加入</mt-button
        >
      </mt-cell>
    </div>
  </div>
</template>

<script>
import MtHeader from "@/components/MtHeader";
export default {
  data() {
    return {
      flocklist: [
        {
          flockId: 10001,
          name: "全球最搞笑的话题",
          info: "在线人数：1000",
          image: "",
        },
        {
          flockId: 10002,
          name: "全球搞笑的话题",
          info: "在线人数：1000",
          image: "",
        },
        {
          flockId: 10003,
          name: "全球有点搞笑的话题",
          info: "在线人数：1000",
          image: "",
        },
        {
          flockId: 10004,
          name: "全球不搞笑的话题",
          info: "在线人数：1000",
          image: "",
        },
      ],
    };
  },

  //计算属性，会监听依赖属性值随之变化
  computed: {},

  //状态监听
  watch: {},

  //过滤器
  filters: {},

  //方法
  methods: {
    goDetails: function (flockId,name) {
      this.$router.push("/info/infoFlock/flockDetails/" + flockId);
      //this.$store.state.flockName;
      this.$store.commit('mutationsFlockName',name);
    }
  },

  //组件
  components: {
    MtHeader,
  },

  //生命周期 - 实例完成
  created() {},

  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>

<style lang='scss'>
.infoFlock {
  height: 100%;
}

.infoFlock .flockContent {
  height: calc(100% - 50px);
  box-sizing: border-box;
  border-top: 1px solid Gainsboro;
}

// .infoFlock .mint-cell img {
//   float: left;
//   margin-right: 10px;
// }

.infoFlock .mint-cell-title {
  overflow: hidden;
}

.infoFlock .mint-cell-label {
  margin-top: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.infoFlock .mint-cell-wrapper {
  background: none;
}

.infoFlock .mint-cell {
  border-bottom: 1px solid Gainsboro;
  padding: 10px 0;
  box-sizing: border-box;
}
.img{
  display: inline-flex;
  flex-wrap: wrap;
  background-color: WhiteSmoke;
  float: left;
  width: 50px;
  height: 50px;
}
.img img{
  padding: 1px;
}
</style>
